<template>
	<view class="container">
		<view class="TabBox">
			<view class="TabList">
				<view class="TabItem" @click="checkItem(1)">
					<view class="" style="display: flex;align-items: center;">
						<view class="gouBox" v-if="type == 1">
							<image src="../../static/bgou.png" mode="" class="gouimg"></image>
						</view>
						<view class="gou" v-else></view>
						<view class="Title">车辆历史报告-事故型</view>
					</view>
					<image src="../../static/shigu.png" mode="" class="TuA"></image>
				</view>
				<view class="TabItem" @click="checkItem(0)"
					style="background: linear-gradient( 90deg, #ECEEFC 0%, #DADFFD 100%);">
					<view class="" style="display: flex;align-items: center;">
						<view class="gouBox" v-if="type == 0">
							<image src="../../static/bgou.png" mode="" class="gouimg"></image>
						</view>
						<view class="gou" v-else></view>
						<view class="Title">车辆历史报告-维保型</view>
					</view>
					<image src="../../static/weibao.png" mode="" class="TuA"></image>
				</view>
			</view>
		</view>
		<view class="TabBox" style="background-color: #FFFFFF;">
			<view class="ChongNum">
				<view class="NumLeft">选择购买次数</view>
				<view class="NumRight">
					<u-number-box v-model="value" @change="valChange"></u-number-box>
				</view>
			</view>
		</view>
		<view class="orderInfo">
			<view class="subOrder">购买明细</view>
			<view class="Item">
				<view class="key">项目名称:</view>
				<view class="value">{{type == 1 ? '车辆历史报告-事故型' : '车辆历史报告-维保型'}}</view>
			</view>
			<view class="Item">
				<view class="key">查询价:</view>
				<view class="value">￥ {{ FirstObj.isFirstOrder ? obj.value - FirstObj.firstDiscount : obj.value}}</view>
			</view>
			<view class="Item" style="padding-bottom: 48rpx;border-bottom: 4rpx solid #eee;">
				<view class="key">创建时间:</view>
				<view class="value">{{$u.timeFormat(new Date(), 'yyyy年mm月dd日 hh:MM:ss')}}</view>
			</view>
			<view class="Item" style="padding: 48rpx 0 12rpx;">
				<view class="key">需付金额:</view>
				<view class="value" style="font-weight: bold;font-size: 30rpx;color: #FF0000;">￥ {{ orderPrice }}</view>
			</view>
		</view>
		<view class="wxPay">
			<view class="image">
				<image src="../../static/wxpay.png" mode="" class="icon"></image>
			</view>
			<view class="paytext" @click="CreateOrder">微信支付</view>
		</view>
	</view>
</template>

<script>
	import wx from 'weixin-js-sdk';
	import {
		CreateAnOrder,
		FirstSLRFree,
		QueryConfigurationList
	} from '../../API/api';
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				type: 1,
				name: null,
				peiList: null,
				obj: {},
				FirstObj: {},
				value: 1,
				appid: "wxea537745cf273236",
			};
		},
		async onLoad(options) {
			console.log(wx);
			// this.type = options.type
			// this.name = options.name
			await this.getPeiList()
			await this.getFirstOrder()
		},
		computed: {
			...mapState(['orderItem', 'IMGBOX']),
			orderPrice() {
				if (this.FirstObj.isFirstOrder) {
					return this.obj.value * this.value - this.FirstObj.firstDiscount
				} else {
					return this.obj.value * this.value
				}
			}
		},
		methods: {
			checkItem(value) {
				this.type = value
			},
			valChange(e) {
				console.log(e);
			},
			async CreateOrder() {
				let res = await CreateAnOrder(this.type, this.value)
				let that = this
				// #ifdef H5
				WeixinJSBridge.invoke('getBrandWCPayRequest', {
						"appId": that.appid, //公众号ID，由商户传入     
						"timeStamp": res.data.timeStamp, //时间戳，自1970年以来的秒数     
						"nonceStr": res.data.nonceStr, //随机串     
						"package": "prepay_id=" + res.data.prepayId,
						"signType": "MD5", //微信签名方式：     
						"paySign": res.data.paySign //微信签名 
					},
					res => { // 定义回调函数
						if (res.err_msg === 'get_brand_wcpay_request:ok') {
							// 支付成功后的逻辑
							console.log('支付成功');
							uni.navigateTo({
								url: `/pages/PaymentSuccess/PaymentSuccess`
							})
						} else if (res.err_msg === 'get_brand_wcpay_request:cancel') {
							// 用户取消支付
							console.log('支付已取消');
							uni.navigateTo({
								url: '/pages/PaymentFailure/PaymentFailure'
							})
						} else {
							// 其他错误情况
							console.log('支付失败', res.err_msg);
						}
					})
				// #endif
				// #ifdef MP-WEIXIN
					uni.requestPayment({
						'timeStamp': res.data.timeStamp,
						'nonceStr': res.data.nonceStr,
						'package': res.data.package,
						'signType': res.data.signType,
						'paySign': res.data.paySign,
						success: (res) => {
							uni.showToast({
								title: '购买成功',
								icon: 'none',
								success: () => {
									
								}
							})
						},
						fail: (err) => {
							uni.showToast({
								title:err.msg,
								icon:'none'
							})
						}
					})
				// #endif
			},
			async getPeiList() {
				let res = await QueryConfigurationList()
				this.obj = res.rows[this.type]
			},
			async getFirstOrder() {
				let res = await FirstSLRFree()
				this.FirstObj = res.data
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 36rpx;
		min-height: 100vh;
		background-color: #F7F7F7;

		.TabBox {
			border-radius: 24rpx;
			margin-bottom: 30rpx;

			// background-color: #FFFFFF;
			.TabList {
				display: flex;
				margin-top: 30rpx;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;

				.TabItem {
					width: 328rpx;
					padding: 24rpx;
					height: 96rpx;
					display: flex;
					position: relative;
					flex-direction: column;
					box-sizing: border-box;
					justify-content: space-between;
					border-radius: 24rpx 24rpx 24rpx 24rpx;
					background: linear-gradient(90deg, #F1F5FC 0%, #BED4FA 100%);

					.gou {
						width: 32rpx;
						height: 32rpx;
						display: block;
						border-radius: 50%;
						background-color: #FFFFFF;
						box-shadow: inset 0rpx 0rpx 8rpx 0rpx rgba(0, 0, 0, 0.2);
					}

					.gouBox {
						.gouimg {
							width: 32rpx;
							height: 32rpx;
							display: block;
						}
					}

					.Title {
						font-weight: 400;
						font-size: 26rpx;
						color: #000000;
						position: relative;
						z-index: 1;
						margin-left: 10rpx;
					}

					.Number {
						font-weight: bold;
						font-size: 22rpx;
						color: #0C72ED;
						position: relative;
						z-index: 1;
					}

					.TuA {
						bottom: 0%;
						right: 20rpx;
						width: 96rpx;
						height: 86rpx;
						display: block;
						position: absolute;
					}
				}
			}

			.ChongNum {
				display: flex;
				align-items: center;
				padding: 28rpx 30rpx;
				justify-content: space-between;

				.NumLeft {
					font-weight: 400;
					font-size: 28rpx;
					color: #101010;
				}

				.NumRight {}
			}
		}

		.orderInfo {
			padding: 36rpx;
			margin-bottom: 80rpx;
			border-radius: 20rpx;
			background-color: #FFFFFF;

			.subOrder {
				font-weight: bold;
				font-size: 40rpx;
				color: #000000;
				margin-bottom: 48rpx;
			}

			.Item {
				display: flex;
				align-items: center;
				padding-bottom: 40rpx;
				justify-content: space-between;

				.key {
					font-weight: 400;
					font-size: 30rpx;
					color: #5D6B82;
				}

				.value {
					font-weight: 400;
					font-size: 30rpx;
					color: #5D6B82;
				}
			}
		}

		.wxPay {
			display: flex;
			width: 558rpx;
			height: 96rpx;
			margin: 0 auto;
			align-items: center;
			border-radius: 48rpx;
			justify-content: center;
			background-color: #FFFFFF;
			box-shadow: 0rpx 0rpx 4rpx 0rpx rgba(9, 30, 66, 0.3);

			.icon {
				width: 56rpx;
				height: 48rpx;
				display: block;
				margin-right: 16rpx;
			}

			.paytext {
				font-weight: 400;
				font-size: 32rpx;
				color: #333333;
			}
		}
	}
</style>